<template>
  <Pager>
    <Panel title="查询条件">

      <template #buttons>
        <el-button icon="el-icon-search" class="blue">Search</el-button>
      </template>

      <el-form class="padding-1" label-position="top" style="width: 600px">
        <div class="flex-h" >
          <el-form-item  label="角色名" style="width: 200px">
            <el-input/>
          </el-form-item>
        </div>
      </el-form>

    </Panel>

    <div class="margin-top-1"></div>

    <Panel title="角色列表">

      <template #buttons>
        <el-button icon="el-icon-search" class="red">asd</el-button>
      </template>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </Panel>

  </Pager>
</template>

<script lang="ts">
import {defineComponent} from 'vue'
import Pager from "@/component/Pager.vue";
import Panel from "@/component/Panel.vue";

export default defineComponent({
  name: "RoleMgr",
  components: {Panel, Pager},
  data(){
    return  {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
});
</script>

<style scoped>

</style>